/*
 * @message: 描述
 * @Author: Roy
 * @Email: cx_love_xc@163.com
 * @Github: cx_love_xc@163.com
 * @Date: 2022-01-12 17:45:14
 * @LastEditors: Roy
 * @LastEditTime: 2022-01-16 18:45:51
 * @Deprecated: 否
 * @FilePath: /blog/src/admin/container/home/component/areaItem/index.jsx
 */
import React, { useState, useCallback, useEffect } from 'react'
import { Button, Modal, Select } from 'antd'
import { SortableElement } from 'react-sortable-hoc'
import { cloneDeep } from 'lodash'
import styles from './style.module.scss'
import { useSelector, useDispatch } from 'react-redux'
import { getChangePageChildAction, getDeletePageChildAction } from '../../../store/action'
import Banner from './components/banner'
import List from './components/list'
import Footer from './components/footer'

const { Option } = Select;

const SELECT_OPTIONS = {
    Banner: 'Banner 组件',
    List: 'List 组件',
    Footer: 'Footer 组件'
}

const map = { Banner, List, Footer }


const useStore = (index) => {
    const dispatch = useDispatch();
    const pageChild = useSelector((state) => state.common.schema.children?.[index] || {});
    const changePageChild = (temp) => {
        dispatch(getChangePageChildAction(index, temp));
    }
    const deletePageChild = () => {
        dispatch(getDeletePageChildAction(index));
    }
    return { pageChild, changePageChild, deletePageChild }
}



const AreaItem = (props) => {

    const { value: index } = props;
    const [isModalVisible, setIsModalVisible] = useState(false);
    const { pageChild, changePageChild, deletePageChild } = useStore(index);
    const [tempPageChild, setTempPageChild] = useState(cloneDeep(pageChild))
    useEffect(() => {
        setTempPageChild(cloneDeep(pageChild));
    }, [pageChild])
    //显示弹框
    const showModal = () => {
        setIsModalVisible(true);
    };
    //确定
    const handleOkClick = useCallback(() => {
        setIsModalVisible(false);
        changePageChild(tempPageChild)

    }, [tempPageChild]);
    //取消
    const handleCancelClick = useCallback(() => {
        setIsModalVisible(false);
        setTempPageChild(cloneDeep(pageChild));
    }, []);
    //下拉选择
    const handleSelectChange = useCallback((value) => {
        setTempPageChild({
            name: value,
            attributes: {},
            children: []
        });
    }, [])
    //删除
    const removeItemFromChildren = useCallback(() => {
        deletePageChild();
    }, []);

    // useImperativeHandle(ref, () => {
    //     return {
    //         getSchema: () => {
    //             return schema
    //         }
    //     }
    // })
    //改变banner数据
    const changeTempPageChildAttributes = useCallback((kvObj) => {
        const newTempPageChild = { ...tempPageChild };
        for (const key in kvObj) {
            newTempPageChild.attributes[key] = kvObj[key];
        }
        setTempPageChild(newTempPageChild);
    }, [tempPageChild]);
    //list数据交互
    const changeTempPageChildChildren = useCallback((children) => {
        const newTempPageChild = { ...tempPageChild };
        newTempPageChild.children = children;
        setTempPageChild(newTempPageChild)
    }, [tempPageChild]);

    const getComponent = useCallback(() => {
        const { name } = tempPageChild;
        const Component = map[name];
        return Component ? <Component {...tempPageChild}
            changeAttributes={(kvObj) => changeTempPageChildAttributes(kvObj)}
            changeChildren={(children) => changeTempPageChildChildren(children)}
        /> : null;
    }, [tempPageChild])



    return (
        <li className={styles.item}>
            <span className={styles.content} onClick={showModal}>{pageChild.name ? pageChild.name + ' 组件' : '当前区块内容为空'}</span>
            <span className={styles.delete}><Button danger size='small' onClick={() => removeItemFromChildren(index)}>删除</Button></span>
            <Modal
                title="选择组件"
                visible={isModalVisible}
                onOk={handleOkClick}
                onCancel={handleCancelClick}
                bodyStyle={{ maxHeight: 500, overflowY: 'scroll' }}
            >
                <Select className={styles.select} onChange={handleSelectChange} value={tempPageChild.name}>
                    {
                        Object.keys(SELECT_OPTIONS).map((key, index) => (
                            <Option key={index} value={key}>{SELECT_OPTIONS[key]}</Option>
                        ))
                    }
                </Select>
                {getComponent()}
            </Modal>
        </li>
    )
}

export default SortableElement(AreaItem);